<template>
  <div class="container">
    <!-- 头部 -->
    <div class="header">
      <div class="s">
        <div class="shi">＋</div>
        <div class="f">发你喜欢的圈子</div>
        <img src="../../../../public/images/main01.jpg" />
      </div>
      <div class="x">
        <!--  -->
        <div class="x1">
          <img src="../../../../public/images/小头像.png" alt="" />
          <input type="text" placeholder="分享点新鲜事" />
        </div>
        <!-- 图标栏 -->
        <div class="san">
          <div class="san1">
            <i class="ri-image-line"></i>
            <div class="san22">相册</div>
          </div>
          <div>|</div>
          <div class="san1">
            <i class="ri-image-line"></i>
            <div class="san22">相册</div>
          </div>
          <div>|</div>
          <div class="san1">
            <i class="ri-image-line"></i>
            <div class="san22">相册</div>
           </div>
        </div>
      </div>
      <div class="b"></div>
      <div class="tj">
        <div>推荐动态</div>
        <div class="tj1">
          <div class="tj11">
            <i class="ri-emotion-laugh-fill"></i>
            <div class="tj111">
              <div class="z">哈哈哈哈哈哈这也太美好了</div>
              <div class="tj222">
                <img src="../../../../public/images/小头像.png" alt="">
                <div>khzz发布</div>
              </div>
            </div>
          </div>
          <div class="p">这不会让人傻笑,但会让人笑傻</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "",
};
</script>

<style lang='less' scoped>
.container {
  max-width: 375px;
  .header {
    height: 202px;
    .s {
      width: 100%;
      height: 200px;
      display: flex;
      align-items: center;
      background-color: rgb(244, 244, 244);
      justify-content: space-around;
      .shi {
        font-size: 60px;
        background-color: white;
        border-radius: 50%;
      }
      .f {
        font-size: 20px;
      }
      img {
        width: 100px;
        height: 100px;
      }
    }
    .x {
      height: 134px;
      width: 100%;
      // background-color: salmon;
      padding-top: 12px;
      .x1 {
        // border-bottom: 1px solid red;
        display: flex;
        margin-bottom: 20px;
        align-items: center;
        justify-content: space-around;
        img {
          border-radius: 50%;
          width: 40px;
          height: 40px;
        }
        input {
          font-size: 24px;
          border-radius: 8px;
          padding-left: 8px;
          width: 270px;
        }
      }
      .san{
        display: flex;
        justify-content: space-around;
      }
      .san1{
        display: flex;
        justify-content: space-around;
        i{
          // float: left;
          // margin-left: 6px;
        }
        .san22{
          // float:right;
        }

      }
    }
    .b{
      width: 100%;
      height: 20px;
      background-color: rgb(246,246,246);
    }
    .tj{
      div{
        font-size: 18px;
        padding: 5px 5px;
      }
      .tj1{
        width: 100%;
        height: 400px;
        // background-color: skyblue;
        .tj11{
          display: flex;
          height: 50px;
          // background-color: tan;
          .ri-emotion-laugh-fill{
              font-size: 40px;
              margin-top: 12px;
          }
          .tj111{
            height: 20px;
            // background-color: violet;
            .z{
              font-size: 15px;
            }
            .tj222{
              display: flex;
              img{
                width: 28px;
                height: 28px;
                border-radius: 50%;
              }
              div{
                color: rgb(154,154,154);
              }
            }
          }
        }
      }
      .p{
        margin: 4px;
      }
    }
  }
}
</style>
